<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp" %>

<c:set var="appPath" scope="application" value="${pageContext.request.contextPath}"/>

<c:set var="ROWPERPAGE" scope="session">
	<sec:authentication property='principal.users.row_per_page' />
</c:set>

<c:set var="FULLNAME" scope="session">
	<sec:authentication property='principal.users.fullname' />
</c:set>

<!DOCTYPE html>
<html>
<head>
<title><tiles:getAsString name="title" /></title>
</head>
<link href="${appPath }/resource/css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="${appPath }/resource/css/pagination.css" rel="stylesheet" type="text/css" media="screen" />
<link href="${appPath }/resource/css/website.css" rel="stylesheet" type="text/css" media="screen" />


<link href="${appPath }/resource/css/base/jquery.ui.all.css" rel="stylesheet" type="text/css" media="screen" />



<%--  scroller 

<link href="${appPath }/resource/css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="${appPath }/resource/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="${appPath }/resource/js/jquery.mousewheel.min.js"></script>
<script src="${appPath }/resource/js/jquery.mCustomScrollbar.js"></script>
--%>


<!-- jQuery Tools
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script> 
-->
<!-- 檔案上傳 
<link href="${appPath }/resource/css/fileuploader.css" rel="stylesheet" type="text/css">
<script src="${appPath }/resource/js/fileuploader.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" ></script>
-->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" ></script>
<script src="${appPath }/resource/js/jquery.tinyscrollbar.min.js" type="text/javascript" ></script>
<script src="${appPath }/resource/js/PIE.js" type="text/javascript" ></script>
<script src="${appPath }/resource/js/jquery.form.js" type="text/javascript" ></script>
<script src="${appPath }/resource/js/utils.js" type="text/javascript" ></script>


<script src="${appPath }/resource/js/ui/jquery.ui.core.js" type="text/javascript" ></script>
<script src="${appPath }/resource/js/ui/jquery.ui.widget.js" type="text/javascript" ></script>
<script src="${appPath }/resource/js/ui/jquery.ui.button.js" type="text/javascript" ></script>



<!-- qTip2 
<script type="text/javascript" src="${appPath }/resource/js/jquery.qtip.js"></script>
<script type="text/javascript" src="${appPath }/resource/js/jquery.qtip.pack.js"></script>
<script type="text/javascript" src="${appPath }/resource/js/qtip.hsu-1.0.0-rc3.js"></script>
<link rel=stylesheet type="text/css" href="${appPath }/resource/css/jquery.qtip.css">
-->

<style type="text/css">
	body {font-size:13px}
	/* table{border-collapse:collapse;border:0;} */
	table, td, th{border:0px solid black;line-height:30px;}
	.center1 {margin-left: auto;margin-right: auto;}
	.trHeader {background-color: #cccccc;font-size: 14px;text-align: left;font-weight: 400;color: #000000; border-bottom:1 solid #000000; }
	.trContent {background-color: #efefef;}	
	.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block; background:#D4D4D4; border-right:1px solid #A4A4A4; border-left:1px solid #A4A4A4;}
	.b1f {height:1px; margin:0 5px; background:#666666;}
	.b2f {height:1px; margin:0 3px; border-right-width:2px; border-left-width:2px;}
	.b3f {height:1px; margin:0 2px;}
	.b4f {height:2px; margin:0 1px;}
	.archead {background:#A4A4A4;}
	div.arccontent, div.archead{ padding-left:15px; color:#FFFFFF; border-right:1px solid #666666; border-left:1px solid #666666;}
	div.archead h1 {margin:0px; background:#A4A4A4; font-size:22px;}
	.arccontent {background:#D4D4D4; padding-top:5px;}
	.trContent td {border-bottom:1px solid #D2D9E7;border-right:1px solid #D2D9E7;}
	
</style>



<script>
//-基因改造植物安全管理知識庫



function report_submit(){
	$.post("${appPath }/index/report.htm",$('#ReportProblem').serialize(),function(data){
		if(data){
			$('#ReportProblemOverlay').fadeOut('slow');
			showMessage("謝謝您的意見",8);
		}			
	});
}

function showReport(){
	document.getElementById("ReportProblem").reset();
	$('#ReportProblemOverlay').fadeIn('fast');
}
</script>
<body>

<%@ include file="/WEB-INF/jsp/common/javascript.jsp" %>
<%@ include file="/WEB-INF/jsp/common/overlayCode.jsp" %>
<%@ include file="/WEB-INF/jsp/common/mainmenu.jsp" %>
<tiles:insertAttribute name="body"/>
<!--  
<footer>
	<p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/"> CSS Templates</a>.</p>
</footer>


onclick="$('#messageBox').fadeOut('slow');"
-->

<table onmousemove="showClose(1);" onmouseout="showClose(2)">
	<tr>
		<td>
		<%--
			FFB0B0 
			E1E5EE
			FFFF80	黃 
		--%>		
			<div id="messageBox" class="boxes" style="position:fixed;right:120px;top:50px;z-index:99;background-color: #FFFF80;height: 40px;border-style:solid;border-width:1px;border-color: #A3A6AF ;display:none;">
				<table style="font-size: 14px;color: white;letter-spacing: 02px;padding-top: 0px ;">
					<tr>
						 <td id="close_msg" style="width:2px;background-color: #006400;cursor: pointer;color:#FFFFFF;font-size: 12px;text-align: center;" title="關閉" onclick="$('#messageBox').fadeOut('slow');">
						 </td>						
						
						<td style="text-align: left;padding-left: 10px; padding-right: 10px; padding-top: 5px;">
							<span id="message" style="color: #445A7F"></span>
						</td>
					</tr>
				</table>
			</div>		
		</td>
	</tr>		
</table>

<!--  問題回報 -->
<form id="ReportProblem" method="post">
	<div id="ReportProblemOverlay" class="overlay" style="display:none;">
		<div id="ReportProblemSubOverlay" align="center" style="padding-top:20px;">			
			<table style="width:800px;border-collapse:collapse;border:2px solid black;" >	
				<tr class="trHeader">
					<td colspan="2" style="padding-left:20px;font-size: 14px;">
						<img src="${appPath }/resource/image/1318407404_issue.png" width="20" height="20">&nbsp;問題回報
					</td>
				</tr>					
				<tr class="trContent">
					<td style="width:150px;text-align: right;font-weight: 300;padding-right: 10px;">
						問題描述
					</td>
					<td style="width:450px;padding-left: 10px;text-align: left;">
						<textarea rows="10" style="width:400px;" class="bar_1" name="problem_desc"></textarea>
					</td>
				</tr>
				<tr class="trContent" >
					<td style="width:150px;text-align: right;font-weight: 300;padding-right: 10px;">
						是否通知
					</td>
					<td style="width:450px;padding-left: 10px;text-align: left;">
						<input type="checkbox" name="reply"/>
						<span style="padding-left:10px;color:#6C6C6C;font-weight: 300;">
							當管理者處理完問題後將發送EMAIL通知
						</span>
					</td>
				</tr>
				<tr style="background-color: #F2F2F2;">
					<td colspan="2" >
						<div style="width:100%;text-align:center;padding-top:20px;padding-bottom:20px;">	
							<span class="button_2" style="width:60px;" onclick="$('#ReportProblemOverlay').fadeOut('slow');">取　消</span>								
							<span class="button" style="width:60px;" onclick="report_submit();">送　出</span>
						</div>
					</td>
				</tr>	
			</table>
		</div>
	</div>
</form>



<div id="info2Overlay" class="overlay" style="display:none;">
	<div id="SubInfo2Overlay2" align="center" style="padding-top:150px;">	
		<div style="width:600px">
			<b class="b1f"></b><b class="b2f archead"></b><b class="b3f archead"></b><b class="b4f archead"></b>
			<div class="archead" style="padding-top:5px;padding-bottom: 5px;font-size: 12px;letter-spacing: 3px;">
				<img src="${appPath }/resource/image/1320847230_information.png" />&nbsp;&nbsp;
				狀態圖示說明
			</div>
			<div class="arccontent arccontentBox" style="padding-left:20px;padding-right:20px;color: green;font-weight: 400;letter-spacing: 2px;text-align: left;">
				<table style="width:100%;">
					<tr>
						<td style="width:10px;">
							<img src="${appPath }/resource/image/switch01.png" style="vertical-align: middle;"/>
						</td>
						<td style="padding-left:10px;">
							基本資料表單暫存中
						</td>
					</tr>
					<tr>
						<td style="width:10px;">
							<img src="${appPath }/resource/image/switch02.png" style="vertical-align: middle;"/>
						</td>
						
						<td style="padding-left:10px;">
							基本資料表單輸入完成
						</td>
					</tr>
					<tr>
						<td style="width:10px;">
							<img src="${appPath }/resource/image/switch03.png" style="vertical-align: middle;"/>
						</td>
						<td style="padding-left:10px;">
							研析資料表單輸入完成
						</td>
					</tr>
					<tr>
						<td colspan="2" style="padding-top:20px;padding-bottom: 10px;">
							<div style="background-color: #3B5998;text-align: center;letter-spacing: 4px;color: white;cursor: pointer;" onclick="$('#info2Overlay').fadeOut('fast')">
								關閉
							</div>
						</td>
					</tr>
				</table>
			</div>
			<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
		</div>
	</div>
</div>

<input type="hidden" id="title_fullname" value="${FULLNAME}">
<script>
$(function(){
	var fullname = $("#title_fullname").val();
	document.title = fullname + " - 基因改造植物安全管理知識庫";
});
</script>
</html>
